<template>
  <div class="menu-bar">
    <div class="xt-main-container">
      <el-menu
        :default-active="activeMenu"
        background-color="transparent"
        text-color="#ffffff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <!-- <el-menu-item index="/LearningHome/PoliticalWorkPlan">政工计划</el-menu-item> -->
        <el-menu-item index="/LearningHome">理论学习</el-menu-item> <el-menu-item index="/LearningHome/NoticeCenter">通知公告</el-menu-item>
<!--        <el-menu-item index="/LearningHome/PoliticalNews">政工要闻</el-menu-item>-->
        <el-menu-item index="/LearningHome/PolicyInterpretation">政策法规</el-menu-item>

        <el-menu-item index="/LearningHome/OnlineExams">在线考试</el-menu-item>
        <!--  <el-menu-item index="/LearningHome/Subject">专题学习</el-menu-item> -->
        <!-- <el-menu-item index="/LearningHome/LearningCommunity">强校论坛</el-menu-item> -->
        <el-menu-item index="/LearningHome/OnlineExams/LearningServices">学习服务</el-menu-item>
       <!-- <el-menu-item index="/LearningHome/Psychological">心理咨询</el-menu-item> -->
        <!--  <el-menu-item index="/Cinziqao">心理咨询</el-menu-item>-->
         <el-menu-item index="/LearningHome/PersonalCenter">个人中心</el-menu-item>
       </el-menu>
       <div style="margin:7px 0 0 10px;">
         <el-input placeholder="请输入关键字" v-model="keyword" class="input-with-select">
           <el-button slot="append" icon="el-icon-search" @click="handleSearchKeyword()"></el-button>
         </el-input>
       </div>
     </div>
   </div>
 </template>
 <script>
 export default {
   name: 'MyMenuBar',
   data() {
     return {
       keyword:''
     }
   },
   computed: {
     activeMenu() {
       return this.$store.state.activeMenu
     }
   },
   methods: {
     handleSelect(key) {
       if (utils.checkStartExam()) {
         if (key !== '/LearningHome/OnlineExams') {
           this.$notify.error('正在考试中')
         }
         this.$store.commit('updateActiveMenu', '')
         setTimeout(() => {
           this.$store.commit('updateActiveMenu', '/LearningHome/OnlineExams')
         }, 500)
         return
       }
       if(key.indexOf('Cinziqao')>-1){
         const {href} = this.$router.resolve({
                     path: `/Cinziqao`
               });
         window.open(href, '_blank');
         return;
       }
       this.$store.commit('updateActiveMenu', key)
       this.$router.push(key)
     },
     handleSearchKeyword(key) {
       if (utils.checkStartExam()) {
         this.$notify.error('正在考试中')
         return
       }
       this.$router.push({path:"/LearningHome/Search",query:{"keyword":this.keyword}})
     }
   }
 }
 </script>
 <style lang="less">
 .menu-bar {
   background-color: #cb2c21;
   font-size: 18px;
   padding: 0px 180px 0px 180px;
   .el-menu--horizontal {
     display: flex;
     justify-content: center;

     .el-menu-item:hover {
       color: #830e06 !important;
       font-weight: 700;
     }

     .el-menu-item {
       flex: 1;
       border-bottom: none;
       font-size: 18px;
       letter-spacing: 1.2px;
       height: 54px;
       display: flex;
       align-content: center;
     }
     .el-menu-item.is-active {
       background-color: #bb0f04 !important;
       font-weight: bold;
     }

     .el-menu-item.is-active:hover {
       color: #c21104 !important;
     }
   }
   .el-menu.el-menu--horizontal,
   .el-menu--horizontal > .el-menu-item.is-active {
     border-bottom: none;
   }
 }
 </style>
